<template>
    <div class="container container-login">
        <a-modal width="1000px" title="" placement="center" :closable="true" :visible="visible" @cancel="onClose"
            class="login-drawer">
            <img class="login-bg" :src="require('@/assets/img/login-bg.png')" />
            <a-spin tip="Loading..." :spinning="formLoading">
                <img class="login-logo-img" :src="require('@/assets/img/login-f.png')" />
                <div class="login-main">

                    <div class="login-qrcode">
                        <img class="login-qrcode-img" :src="require('@/assets/img/wechat-qrcode.jpg')" />
                        <div class="qrcode-words">扫码进入小程序</div>
                    </div>
                    <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
                        :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules"
                        v-if="loginType==='acc'">
                        <div class="form-panel">
                            <div class="form-title">欢迎登录</div>
                            <a-form-model-item class="yuan-form-item" label="用户名" prop="username">
                                <a-input style="width:250px" v-model="formData.username" placeholder="请输入账号"
                                    autocomplete="new-user" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="密码" prop="password">
                                <a-input type="password" style="width:250px" v-model="formData.password" placeholder="请输入密码"
                                    autocomplete="new-password" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="验证码" prop="num">
                                <div class="code-box">
                                    <a-input class="input" v-model.trim="formData.num" auto-complete="off" placeholder="请输入验证码"
                                        @keyup.enter="login"></a-input>
                                    <div class="login-code" @click="getCode">
                                        <SIdentify :identifyCode="identifyCode"></SIdentify>
                                    </div>
                                </div>

                            </a-form-model-item>
                            <div class="login-type" @click="loginType='phone'">手机号登录</div>
                            <div class="login-btn-box">
                                <a-button class="login-btn" type="default" @click="clickRegister">注册</a-button>
                                <a-button class="login-btn" type="primary" @click="login">登录</a-button>
                            </div>

                        </div>
                    </a-form-model>
                    <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
                        :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="phoneRules"
                        v-else>
                        <div class="form-panel">
                            <div class="form-title">欢迎登录</div>
                            <a-form-model-item class="yuan-form-item" label="手机号" prop="phone">
                                <a-input style="width:250px" v-model="formData.phone" placeholder="请输入手机号"
                                    autocomplete="new-user" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="验证码" prop="chaptcha">
                                <div class="code-box">
                                    <a-input class="input" v-model.trim="formData.chaptcha" auto-complete="off"
                                        placeholder="请输入验证码" @keyup.enter="login"></a-input>
                                    <a-button class="captcha-btn" type="primary" @click="getCaptcha">{{captchaWords}}</a-button>
                                </div>

                            </a-form-model-item>
                            <div class="login-type" @click="loginType='acc'">账号密码登录</div>
                            <div class="login-btn-box">
                                <a-button class="login-btn" type="default" @click="clickRegister">注册</a-button>
                                <a-button class="login-btn" type="primary" @click="login">登录</a-button>
                            </div>

                        </div>
                    </a-form-model>
                </div>
            </a-spin>
            <template slot="footer">
                <div></div>

            </template>
        </a-modal>
        <RegisterVue :visible="registerVisible" @closeDrawer="() => registerVisible = false" v-if="registerVisible" />
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import SIdentify from "@/components/authcode.vue";
import RegisterVue from "@/views/login/register.vue";
import api from "@/api/api";

@Component({
    name: "dom",
    components: { SIdentify, RegisterVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    loginType = "acc";
    formData: any = {};
    formLoading = false;
    rules = {
        username: [{ required: true, message: "请输入账号", trigger: "change" }],
        password: [{ required: true, message: "请输入密码", trigger: "change" }],
        num: [{ required: true, message: "请输入验证码", trigger: "change" }],
    };
    phoneRules = {
        phone: [{ required: true, message: "请输入手机号", trigger: "change" }],
        chaptcha: [{ required: true, message: "请输入验证码", trigger: "change" }],
    };

    onClose() {
        (this.$refs.form as any).resetFields();
        this.$emit("closeDrawer");
    }
    uuid = "";
    identifyCode = "";
    async getCode() {
        try {
            this.formLoading = true;
            const res = await api.checkCode();
            this.identifyCode = res.captcha;
            this.uuid = res.uuid;
        } finally {
            this.formLoading = false;
        }
    }
    async login() {
        (this.$refs.form as any).validate(async (valid) => {
            if (!valid) return;

            try {
                this.formLoading = true;
                let res:any={}
                if (this.loginType === "acc") {
                    let data = {
                        name: this.formData.username,
                        password: this.formData.password,
                        code: this.formData.num,
                        uuid: this.uuid,
                        type: "FRONT",
                    };
                    res = await api.userLogin(data);
                }else{
                    let data = {
                        phone: this.formData.phone,
                        noteCode: this.formData.chaptcha,
                    };
                    res = await api.userPhoneLogin(data);
                }
                

                let userInfo = {
                    ...res.data,
                    permissions: res.data.resourceChildren?.map((item) => item.name) || [],
                };
                localStorage.setItem("siteUserInfo", JSON.stringify(userInfo));
                location.reload();
                this.onClose();
            } finally {
                this.getCode();
                this.formLoading = false;
            }
        });
    }
    mounted() {
        this.getCode();
    }
    registerVisible = false;
    clickRegister() {
        this.registerVisible = true;
    }

    captchaWords = "获取验证码";
    async getCaptcha() {
        if (!this.formData.phone) {
            this.$message.warning("请先输入手机号");
            return;
        }
        if (this.captchaWords !== "获取验证码") return;

        try {
            this.formLoading = true;

            const res = await api.getLoginCode({ phone: this.formData.phone });
            let timeNum = 60;
            this.captchaWords = timeNum + "s后重试";
            const timeInterval = setInterval(() => {
                timeNum--;
                if (timeNum <= 0) {
                    clearInterval(timeInterval);
                    this.captchaWords = "获取验证码";
                } else {
                    this.captchaWords = timeNum + "s后重试";
                }
            }, 1000);
        } finally {
            this.formLoading = false;
        }
    }
}
</script>

<style lang="scss">
.container-login {
}
.login-drawer.ant-drawer-open {
    .ant-drawer-content-wrapper {
        right: 30px !important;
    }
}
.login-drawer {
    .ant-drawer-content {
        border-radius: 12px;
    }
    .ant-drawer-content-wrapper {
        height: 600px !important;
        top: calc(100vh / 2 - 300px);
    }
    .ant-spin-nested-loading {
        z-index: 2;
    }
    .login-logo-img {
        width: 226px;
    }
    .login-main {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .login-bg {
        width: 100%;
        height: 600px;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        border-radius: 12px;
    }
    .login-qrcode {
        width: 50%;
        border-right: solid 1px #eee;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .login-qrcode-img {
        width: 170px;
    }
    .qrcode-words {
        font-weight: bold;
        font-size: 17px;
        color: #102040;
        margin-top: 15px;
    }
    .yuan-form {
        width: 50%;
    }
    .form-title {
        font-weight: bold;
        font-size: 32px;
        color: #102040;
        text-align: center;
        margin-bottom: 40px;
    }
    .login-btn-box {
        display: flex;
        justify-content: space-between;
        padding: 0 50px;
        margin-top: 30px;
    }
    .login-btn {
        width: 160px;
        height: 48px;
        font-size: 18px;
    }
    .yuan-form-item {
        margin-bottom: 30px !important;
    }
    .code-box {
        display: flex;
        align-items: center;
        .input {
            width: 120px;
        }
    }
    .login-type {
        text-align: center;
        cursor: pointer;
    }
    .login-type:hover {
        color: #1890ff;
    }
    .captcha-btn {
        margin-left: 5px;
    }
}
</style>
